<template>
	<view class="teacherView">
		<view class="teacher-item" v-for="(item, index) in tclist" :key="index" @click="gotohdtc(index)">
			<view class="teacher-left">
				<view class="teacher-item_image">
					<!-- <image :src="item.avatar ? item.avatar : defimg"></image> -->
					<headimg :realSrc="item.avatar"></headimg>
					</view>
				<text>{{ item.nicheng ? item.nicheng : '未设置昵称' }}</text>
			</view>
			<view class="teacher-right">
				<view class="news" v-if="item.num > 0">{{ item.num }}</view>
				{{ item.teach_subject_name ? item.teach_subject_name : '未知' }}
			</view>
		</view>
	</view>
</template>

<script>
import util from '@/common/util.js';
import headimg from '@/components/head_img.vue'
export default {
	components:{
		headimg
	},
	data() {
		return {
			tclist: [],
			currentChild: uni.getStorageSync('currentChild'),
			groupid: '',
			defimg: this.defimg
		};
	},
	onLoad(e) {
		this.groupid = e.groupid;
		this.getTeacher(e.groupid);
		uni.closeSocket();
		var _this=this;
		uni.connectSocket({
			url: 'ws://' + this.sevenUrl + '/private/message?token=' + uni.getStorageSync('token'),
			success: function(res) {
				// uni.showToast({
				// 	title: '连接成功',
				// 	icon:'none'
				// });
				_this.sevenintervalID = setInterval(function() {
					uni.sendSocketMessage({
						data: 'ping',
						success: function(res) {},
						fail: function(res) {}
					});
				}, 10000);
			},
			fail: function(res) {
				// uni.showToast({
				// 	title: '连接失败'+JSON.stringify(res),
				// 	icon:'none'
				// });
			}
		});
	},
	onUnload() {
		uni.closeSocket();
		clearInterval(this.sevenintervalID);
		uni.onSocketClose(function(res) {
			//  uni.showToast({
			//  	title: 'WebSocket 已关闭！',
			// icon:'none'
			//  });
		});
	},
	onShow() {
		this.listenMessage();
		this.setData();
	},
	methods: {
		setData: function() {
			this.tclist.forEach((item, index) => {
				var key = this.groupid + 'usr_type' + item.users_type + 'user' + item.user_id;
				item.num = uni.getStorageSync(key) ? uni.getStorageSync(key).num : 0;
			});
			this.$forceUpdate();
		},
		listenMessage: function() {
			var _this = this;
			uni.onSocketMessage(function(res) {
				if (res.data != 'ping') {
					console.log('收到服务器内容3：' + res.data);
					var data = JSON.parse(res.data);
					// uni.showToast({
					// 	title: JSON.stringify(data),
					// 	icon:'none'
					// });
					if (data.code == 222) {
						data = data.data;
						var arr = [];
						for (let index in data) {
							console.log(data[index]);
							arr = arr.concat(data[index]);
						}
						util.Savemsg(arr, true, false);
					} else if (data.code == 220) {
						var arr = [];
						arr.push(data.data);
						util.Savemsg(arr, true, false);
					}
					_this.setData();
				}
			});
		},
		/* 获取教师列表 */
		getTeacher(groupid) {
			var data = {
				groupid: groupid,
				users_type: 2,
				student_id: this.currentChild.student_id
			};
			this.$zapi.apiPost('user/userlist.Lists/searchTcStu', data).then(res => {
				if (res.data.code == 200 && res.data.data) {
					this.tclist = res.data.data;
					this.setData();
				}
			});
		},
		gotohdtc: function(index) {
			var Tcdata = this.tclist[index];
			this.tclist[index].num = 0;
			this.$forceUpdate();
			uni.navigateTo({
				url: '../quesAndAnswer/online-service?groupid=' + Tcdata.groupid + '&user_id=' + Tcdata.user_id + '&user_type=' + 2 + '&nicheng=' + Tcdata.nicheng
			});
			// uni.setStorageSync('groupType',1)
			// uni.navigateTo({
			// 	url:'../quesAndAnswer/courseessay?user_id='+this.currentChild.student_id+'&nicheng='+
			// 	this.currentChild.nicheng+'&users_type=2&tc_user_id='+Tcdata.user_id+'&tc_nicheng='+Tcdata.nicheng

			// })
		}
	}
};
</script>

<style>
/* 内容 */
.teacherView {
	width: 100%;
	position: absolute;
}

.teacher-item {
	height: 100upx;
	line-height: 100upx;
	background: #ffffff;
	margin-left: 30upx;
	width: 92%;
	margin-top: 4%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	border-bottom: 1px solid rgba(229, 229, 229, 1);
}



.teacher-item_image {
	width: 64upx;
	height: 64upx;
	border-radius: 50%;
	margin-right: 20upx;
}
.teacher-left {
	color: #333333;
	font-size: 32upx;
	display: flex;
	align-items: center;
}

.teacher-right {
	display: flex;
	flex-direction: row;
	align-items: center;
	color: #999999;
}
.news {
	height: 40upx;
	min-width: 40upx;
	border-radius: 40upx;
	background: red;
	text-align: center;
	line-height: 40upx;
	color: #fff;
	margin-right: 30upx;
}
</style>
